<script setup>
import { Avatar, HomeFilled, Folder } from '@element-plus/icons-vue'
</script>

<template>
    <el-row class="row-bg header" justify="space-between">
        <el-col :span="6">
            <div class="grid-content logo">
                <el-icon><avatar /></el-icon>
                <div>交警大队</div>
            </div>
        </el-col>
        <el-col :span="9">
            <div class="grid-content header_nav">
                <el-link :icon="HomeFilled" href="/home/index.html">主页</el-link>
                <el-link :icon="Folder" href="/article/index.html">文章</el-link>
                <el-link :icon="Folder" href="#">待定1</el-link>
                <el-link :icon="Folder" href="#">待定2</el-link>
                <el-link :icon="Folder" href="#">待定3</el-link>
            </div>
        </el-col>
    </el-row>
</template>

<style scoped>
.header {
    padding-top: 10px;
    padding-left: 20px;
    font-size: 200%;
}
.logo {
    display: flex;
}
.header_nav {
    display: flex;
    justify-content: space-evenly;
}
</style>
